<template>
  <div class="login-mengban">
    <div class="login-box">
      <form action="">
        <div class="login-reg-select clearFix">
          <a @click="toLog" href="#" class="login-select-btn a1"
            ><i v-if="isLogin" class="login-on"></i>登录</a
          >
          <a @click="toReg" href="#" class="reg-select-btn"
            ><i v-if="!isLogin" class="reg-on"></i>注册</a
          >
        </div>
        <div
          v-if="flag"
          class="login-details account-box"
          style="display: block"
        >
          <label for="login_account"></label>
          <input type="text" id="login_account" v-model="userInfo.username" placeholder="用户账号" prop="username"/>
          <label for="login_pwd"></label>
          <input type="password" id="login_pwd" v-model="userInfo.password" placeholder="用户密码" prop="passwprd"/>
          <div class="check_code clearFix">
            <div class="check-input">
              <label for="check_code_input1"></label>
              <input type="text" id="check_code_input1" placeholder="验证码" />
            </div>
            <div class="check-pic">
              <img src="../indexImg/check-code_04.png" alt="" />
            </div>
          </div>
          <label for="login-btn"></label>
          <div @click="log" type="submit" id="login-btn" >登录</div>
          <div class="other-login">
            <p>你还可以用第三方帐号登录</p>
            <a href="#"><img src="../indexImg/qqIcon.png" alt="" /></a>
            <a href="#"><img src="../indexImg/weixinIcon.png" alt="" /></a>
            <a href="#"><img src="../indexImg/weiboIcon.png" alt="" /></a>
          </div>
        </div>
        <div v-else class="reg-details account-box">
          <label for="reg_account"></label>
          <input type="text" id="reg_account" placeholder="取个名字吧" v-model="userInfo.username" />
          <label for="reg_pwd"></label>
          <input type="password" id="reg_pwd" placeholder="设一个密码吧" v-model="userInfo.password"/>
          <label for="reg_pwd_confirm"></label>
          <input
            type="password"
            id="reg_pwd_confirm"
            placeholder="再输一遍密码吧"
          />
          <div class="check_code clearFix">
            <div class="check-input">
              <label for="check_code_input2"></label>
              <input type="text" id="check_code_input2" placeholder="验证码" />
            </div>
            <div class="check-pic">
              <img src="../indexImg/check-code_04.png" alt="" />
            </div>
          </div>
          <label for="reg-btn"></label>
          <div @click="reg"  id="reg-btn">注册</div>
          <span class="res">{{msg}}</span>
        </div>
      </form>
      <a class="findback-pwd" href="#">忘记密码?</a>
    </div>
  </div>
</template>

<script>
import "../style/init.css";
import "../style/commonHeader.css";
import "../style/commonFooter.css";
import "../style/login-tanchuceng.css";

import api from '../../api'
export default {
  data() {
    return {
      flag: true,
      isLogin: true,
      userInfo:{
        username:'',
        password:''
      },
      msg:''
    };
  },
  methods: {
    //登陆页点击注册时
    toReg() {
      this.flag = false, 
      this.isLogin = false;
    },
    //登录页点击登录时
    toLog() {
      this.flag = true;
      this.isLogin = true;
    },
    //登陆
    log(){
      //console.log(this.userInfo.username,this.userInfo.password);
      api.getlogin({
        username:this.userInfo.username,
        password:this.userInfo.password
      }).then(res =>{
        console.log(res);
        if(res.status==200){
          //把用户信息存入本地
          localStorage.setItem('username', JSON.stringify(res.data.data.username));
          //登录成功 跳转到个人中心页
          this.$router.push("/ucenter")
        }
        
      })
    },
    //注册
    reg(){
      api.getreg({
        username:this.userInfo.username,
        password:this.userInfo.password
      }).then(res => {
        console.log(res);
        this.msg=res.data.meg
      })
    }
  },
};
</script>

<style>
.login-mengban {
  background: url("../indexImg/login-back_02.png");
  width: 100%;
  overflow: hidden;
  position: relative;
  display: block;
  min-height: 800px;
}
.login-box {
  width: 300px;
  height: 364px;
  background: #666;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 18px 20px;
  z-index: 20000;
  display: block;
}
.reg-select-btn {
  position: relative;
}
.reg-on {
  width: 0;
  height: 0;
  position: absolute;
  top: 40px;
  left: 60px;
  border-top: 11px solid #E65E42;
  border-right: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 11px solid transparent;
}
</style>